// - 找到图片 
let image = $('#image');
// - 设置配置项
let option = {
    // 纵横比(宽高比)
    aspectRatio: 1, // 正方形
    // 指定预览区域
    preview: '.img-preview' // 指定预览区的类名（选择器）
};
// - 调用cropper方法，创建剪裁区
image.cropper(option);


// 点击上传使用input
$('#btn-file').on('click', function () {
    $('#file').trigger('click')
})

// 换图片
$('#file').on('change', function () {
    let files = this.files
    if (files.length > 0) {
        let fileobj = files[0];
        console.log(fileobj);
        let url = URL.createObjectURL(fileobj)
        console.log(url);
        image.cropper('destroy').attr('src', url).cropper(option)
        // image.attr('src', url)
    }
})

$('button:contains("确定")').on('click', function () {
    // 剪裁图片
    let caijian = image.cropper('getCroppedCanvas', { width: 30, height: 30 });
    // 把canvas转换成base64格式的字符串
    let base64 = caijian.toDataURL('image/jpeg', 0.3);
    // console.log(base64)
    $.ajax({
        type: 'POST',
        url: '/my/user/avatar',
        data: { avatar: base64 },
        success: function (res) {
            layer.msg(res.message);
            if (res.status === 0) {

                // 重新渲染index页面
                window.parent.restusername();
            }
        }
    });
})

